<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<body>
<!--无分类的头部，简略版-->
<header th:fragment="header" class="header-area header-style-5">
    <div class="header-top header-top-ptb-1 d-none d-lg-block">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-3 col-lg-4">
                    <div class="header-info">
                        <ul>
                            <li><i class="fi-rs-smartphone"></i> <a href="#">(+01) - 2345 - 6789</a></li>
                            <li><i class="fi-rs-marker"></i><a th:href="@{/vm/front/page-contact}">我们的位置</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-4"></div>
                <div class="col-xl-3 col-lg-4">
                    <div class="header-info header-info-right">
                        <ul>
                            <li th:if="${member!=null}">
                                <a th:href="@{/vm/front/account}" title="个人中心">
                                    <i class="fi-rs-user"></i>
                                    <span th:text="${member.account}">账号名</span>
                                </a>
                            </li>
                            <li>
                                <!--                               如果member不为空-->
                                <a th:if="${member!=null}" th:href="@{/vm/front/logout}"
                                   style="margin-left: 40px" title="退出登录">
                                    <i class="fi-rs-sign-out"></i>
                                </a>
                                <!-- 如果 member 为 null -->
                                <a th:unless="${member != null}" th:href="@{/vm/front/login}"
                                   style="margin-left: 40px"  title="登录">
                                    <i class="fi-rs-sign-in"></i>
                                </a>

                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="header-bottom sticky-bar sticky-white-bg">
        <div class="container">
            <div class="header-wrap header-space-between position-relative">
                <div class="logo logo-width-1">
                    <a th:href="@{/vm/front/index}"><img th:src="@{/assets/front/imgs/theme/logo.png}" alt="logo"></a>
                </div>
                <div class="main-menu main-menu-grow main-menu-padding-1 main-menu-lh-1 main-menu-mrg-1 hm3-menu-padding d-none d-lg-block hover-boder">
                    <nav>
                        <ul>
                            <li ><a class="active" th:href="@{/vm/front/index}">主页 </a></li>
                            <li style="padding-left: 0"><a th:href="@{/vm/front/goods/grid}">商品</a></li>
                            <li style="padding-left: 0"><a href="#">帮助 <i class="fi-rs-angle-down"></i></a>
                                <ul class="sub-menu">
                                    <li><a th:href="@{/vm/front/purchase-guide}">购物指南</a></li>
                                    <li><a th:href="@{/vm/front/privacy-policy}">隐私政策</a></li>
                                    <li><a th:href="@{/vm/front/terms}">服务条款</a></li>
                                </ul>
                            </li>
                            <li style="padding-left: 0"><a th:href="@{/vm/front/about}">关于商城</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="header-action-right">
                    <div class="search-style-2">
                        <form action="#">
                            <select class="select-active">
                                <option>搜索</option>
                                <option>Women's Clothing</option>
                                <option>Men's Clothing</option>
                                <option>Cellphones</option>
                                <option>Computer & Office</option>
                                <option>Consumer Electronics</option>
                                <option>Jewelry & Accessories</option>
                                <option>Home & Garden</option>
                                <option>Luggage & Bags</option>
                                <option>Shoes</option>
                                <option>Mother & Kids</option>
                            </select>
                            <input type="text" placeholder="搜索项目…">
                        </form>
                    </div>
                    <div class="header-action-2">
                        <div class="header-action-icon-2">
                            <a th:href="@{/vm/front/shop/wishlist}">
                                <img class="svgInject" alt="Evara" th:src="@{/assets/front//imgs/theme/icons/icon-heart.svg}">
                                <span th:if="${member!=null}" th:text="${wis.size()}"
                                      class="pro-count blue" >2</span>
                            </a>
                        </div>
                        <div class="header-action-icon-2">
                            <a class="mini-cart-icon" th:href="@{/vm/front/shop/cart}">
                                <img alt="Viva" th:src="@{/assets/front/imgs/theme/icons/icon-cart.svg}">
                                <span th:if="${member!=null}" th:text="${cartItems.size()}"
                                      class="pro-count blue" >2</span>
                            </a>
                            <div class="cart-dropdown-wrap cart-dropdown-hm2">
                                <div class="shopping-cart-footer">
                                    <div class="shopping-cart-button">
                                        <a th:href="@{/vm/front/shop/cart}" class="outline">查看购物车</a>
                                        <a th:if="${lastCreatedOrder!=null}"
                                           th:href="@{/vm/front/shop/checkout(id=${lastCreatedOrder.id})}">查看结算单</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="header-action-icon d-block d-lg-none">
                            <div class="burger-icon">
                                <span class="burger-icon-top"></span>
                                <span class="burger-icon-mid"></span>
                                <span class="burger-icon-bottom"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

</body>
</html>